<template>
  <div class="search_header">
    <div class="search_bar">
      <div class="bar">
        <i></i>
        <input type="text" placeholder="请点击搜索商品" v-model="keywords" />
      </div>
      <div class="searchBtn" @click="clickSearch(keywords)">搜索</div>
    </div>
    <div class="hot_search">
      <div class="hot">热门搜索</div>
      <ul class="com">
        <li v-for="(item, i) in hotList" :key="i" @click="clickSearch(item)">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {mapMutations} from "vuex"
 import {Debounce,Throttle} from "@/utils/tools";
export default {
  data() {
    return {
      keywords: "",
      hotList: ["吸尘器", "加湿器", "马桶  ", "热水器"],
    };
  },
  created() {},
  methods: {
    ...mapMutations('search',['getSearch']),
    initSearchData(keywords) {

      this.getSearch(null)
      let url = "/api/products";

      let loading = localStorage.getItem("loading");

      if (loading) {
        this.$emit("openLoading", loading);
      }

      let pro = axios
        .get(url, { params: { page: 1, limit: 8, keyword: keywords } })
        .then((response) => {
          let { status, data } = response.data;
          if (status == 200) {
            setTimeout(() => {
              loading = false;
              this.$emit("openLoading", loading);
              localStorage.setItem("loading", loading);
              this.$store.commit("search/getSearch", data);
            }, 500);
          }
          console.log("搜索数据获取成功", response.data);
        })
        .catch((err) => {
          console.log("搜索数据获取失败");
        });
    },
    clickSearch:Debounce(function(keywords){
			this.initSearchData(keywords)
		},300)

    
  },
};
</script>

<style lang="scss" scoped>
.search_bar {
  height: 50px;
  padding-top: 8px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;

  .bar {
    height: 33px;
    background-color: #f7f7f7;
    border-radius: 16.5px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    input {
      width: 250px;
      outline: none;
      border: 0;
      font-size: 14px;
      background-color: #f7f7f7;
      color: #333;
    }
    i {
      display: inline-block;
      width: 18px;
      height: 18px;
      background: url(../../assets/icon/index/bbb_search.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 8px;
    }
  }

  .searchBtn {
    font-size: 16px;
    height: 33px;
    line-height: 33px;
    margin-left: 12px;
  }
}

.hot_search {
  background-color: #fff;
  overflow: hidden;
  .hot {
    font-size: 14px;
    color: #999;
    margin: 25px 15px 12.5px;
  }
  .com {
    padding: 0 15px 15px;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
    li {
      height: 32px;
      padding: 0 7px;
      text-align: center;
      line-height: 32px;
      border: 2px solid #aaa;
      font-size: 13px;
      margin-right: 10px;
      margin-bottom: 6px;
    }
  }
}
</style>

